<!DOCTYPE html>
<html>

<head>
    <title>Flaticon WebFont</title>
    <link rel="stylesheet" type="text/css" href="flaticon.css">
    <meta charset="UTF-8">
    <style>
    body {
        font-family: sans-serif;
        line-height: 1.5;
        font-size: 16px;
        padding: 20px;
        color:#333;
    }
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
        font-family: Flaticon;
        font-size: 30px;
        font-style: normal;
        margin-left: 20px;
        color: #333;
    }
    .image p {
		font-size: 12px;
		margin: 0px;
		clear: none;
		width: 300px;
		line-height: 40px;
	}
    .text {
        float: left;
        font-size:14px;
        margin-top: 15px;
    }
    .text ul {
        margin-left:0px;
        color:#111;
        margin-bottom:20px;
    }
    .text .ex {
        font-size:12px;
        color:#666;
        margin-left:35px;
        display:block;
    }
    .text ul li {
        margin-top:10px;
        list-style:none;
    }
    .num {
        background:#66A523;
        color:#fff;
        border-radius:20px;
        padding:1px;
        display:inline-block;
        width:22px;
        height:22px;
        text-align:center;
        margin-right: 5px;
    }
    .text ul strong {
        font-weight:normal;
        color:#000;
    }
    .image {
        width: 280px;
        float: left;
        margin-bottom: 15px;
        margin-right: 30px;
    }
    #glyphs {
        clear: both;
    }
    .image p:nth-child(even) i {
        clear: none;
    }
    .glyph {
        display: inline-block;
        width: 120px;
        margin: 10px;
        text-align: center;
        vertical-align: top;
        background: #FFF;
    }
    .glyph .glyph-icon {
        padding: 10px;
        display: block;
        font-family:"Flaticon";
        font-size: 64px;
        line-height: 1;
    }
    .glyph .glyph-icon:before {
        font-size: 64px;
        color: #666;
        margin-left: 0;
    }
    .class-name {
        font-size: 12px;
    }
    .author-name {
		font-size: 10px;
	}
	a{
		color: #66A523;
	}
    .instructions {
        font-style:italic;
        font-size:22px;
        margin-bottom:10px;
    }
    .iconsuse {
        font-size:22px;
        font-style:italic;
        padding-top:20px;
        margin-top:20px;
        border-top:1px solid #bbb;
    }
    .usetitle {
        margin-bottom: 10px;
        font-size: 20px;
        font-style: italic;
    }
    .class-name:last-child {
        font-size: 10px;
        color:#888;
    }
    .class-name:last-child a {
        font-size: 10px;
        color:#555;
    }
    .class-name:last-child a:hover {
        color:#66A523;
    }
    .glyph > input {
        display: block;
        width: 100px;
        margin: 5px auto;
        text-align: center;
        font-size: 12px;
        cursor: text;
    }
    .glyph > input.icon-input {
        font-family:"Flaticon";
        font-size: 16px;
        margin-bottom: 10px;
    }
    h1.logo {
        font-size: 40px;
        letter-spacing: -1px;
        margin-top: -16px;
        text-transform: lowercase;
        border-bottom:1px solid #bbb;
    }
    h1.logo strong {
        font-size: 16px;
        font-family:sans-serif;
        font-weight:normal;
        color:#333;
    }
    h1.logo a {
        color:#34302d;
        text-decoration: none;
    }
    h1.logo a span {
        color:#66A523;
    }
    #footer {
        padding-top:40px;
        clear:both;
        text-align:center;
    }
    #footer a {
        color:#66A523;
    }
    textarea {
		margin: 0px;
		width: 800px;
		height: 150px;
		border: 1px solid #CCC;
		resize: none;
		background: #EEE;
    }
    .author-link, .attrDiv a{
    	font-size: 12px;
    	color: #333;
    	text-decoration: none;
    }
    .external {
    	display: block;
    }
    .attrDiv {
		font-size: 12px;
	}
    .attribution {
        border-top: 1px solid #AAA;
        margin: 10px 0;
        padding-top: 15px;
    }
    </style>
</head>

<body>
    <header>
        <h1 class="logo">
            <a href="http://www.flaticon.com">
                <span>FLAT</span>ICON</a>
            <strong>Font Demo</strong>
        </h1>
    </header>

    <section class="demo">
        <div class="text">

            <div class="instructions">Instructions:</div>

            <ul>
                <li>
                    <p>
                        <span class="num">1</span>Copy the "Fonts" files and CSS files to your website CSS folder.
                </li>
                <li>
                    <p>
                        <span class="num">2</span>Add the CSS link to your website source code on header.
                        <br />
                        <span class="ex">&lt;head&gt;
                            <br/>...
                            <br/>&lt;link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css"&gt;
                            <br/>...
                            <br/>&lt;/head&gt;</span>
                </li>

                <li>
                    <p>
                        <span class="num">3</span>Use the icon class on "display:inline" elements:
                        <br />
                        <span class="ex">Use example: &lt;i class=&quot;flaticon-airplane49&quot;&gt;&lt;/i&gt; or &lt;span class=&quot;flaticon-airplane49&quot;&gt;&lt;/span&gt;</span>
                </li>
            </ul>
        </div>

    </section>

    <section id="glyphs"><div class="glyph">
		<div class="glyph-icon flaticon-add121"></div>
		<div class="class-name">.flaticon-add121</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/add-circular-button_51918">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-approve9"></div>
		<div class="class-name">.flaticon-approve9</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/approve-circular-button_51898">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-back28"></div>
		<div class="class-name">.flaticon-back28</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/back-arrow-circular-symbol_51970">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-chat44"></div>
		<div class="class-name">.flaticon-chat44</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/chat-circular-outlined-interface-button_51806">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-circular191"></div>
		<div class="class-name">.flaticon-circular191</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/circular-clock_51991">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-circular194"></div>
		<div class="class-name">.flaticon-circular194</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/circular-arrow-in-a-circle-outline-thin-symbol_52024">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-close33"></div>
		<div class="class-name">.flaticon-close33</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/close-circular-button-of-a-cross_52084">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-configuration12"></div>
		<div class="class-name">.flaticon-configuration12</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/configuration-wheel-interface-button-of-circular-shape_51874">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-double89"></div>
		<div class="class-name">.flaticon-double89</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/double-arrow-diagonal-in-a-circle_51827">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-down51"></div>
		<div class="class-name">.flaticon-down51</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/down-arrow-in-a-circle_51801">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-exclamation22"></div>
		<div class="class-name">.flaticon-exclamation22</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/exclamation-sign-in-a-circle_52303">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-favourite15"></div>
		<div class="class-name">.flaticon-favourite15</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/favourite-circular-button_52158">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-internet28"></div>
		<div class="class-name">.flaticon-internet28</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/internet-cloud-symbol-in-circular-button_52006">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-like47"></div>
		<div class="class-name">.flaticon-like47</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/like-heart-circular-outlined-button_52270">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-menu33"></div>
		<div class="class-name">.flaticon-menu33</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/menu-circular-button_52152">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-minus65"></div>
		<div class="class-name">.flaticon-minus65</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/minus-sign-in-a-circle_51928">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-mode"></div>
		<div class="class-name">.flaticon-mode</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/mode-circular-button_52125">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-placeholder14"></div>
		<div class="class-name">.flaticon-placeholder14</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/placeholder-in-a-circle-outline_51770">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-right127"></div>
		<div class="class-name">.flaticon-right127</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/right-arrow-circular-button_52284">Robin Kylander</a></div></div><div class="glyph">
		<div class="glyph-icon flaticon-search67"></div>
		<div class="class-name">.flaticon-search67</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/search-circular-button_52245">Robin Kylander</a></div></div></section>

<section class="attribution">

	<div class="usetitle">License and attribution:</div><div class="attrDiv">Font generated by <a href="http://www.flaticon.com">flaticon.com</a>
 under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY</a>. The authors are: <a href="http://superstoked.se">Robin Kylander</a>.</div><div class="usetitle">Copy the Attribution License:</div>

<textarea onclick="this.focus();this.select();">Font generated by &lt;a href=&quot;http://www.flaticon.com&quot;&gt;flaticon.com&lt;/a&gt;
 under &lt;a href=&quot;http://creativecommons.org/licenses/by/3.0/&quot;&gt;CC BY&lt;/a&gt;. The authors are: &lt;a href=&quot;http://superstoked.se&quot;&gt;Robin Kylander&lt;/a&gt;.</textarea>

</section>

<section class="iconsuse">
    	<div class="usetitle">Examples:</div>
		<div class="image"><p>&lt;i class=&quot;flaticon-add121&quot;&gt;&lt;/i&gt; <i class="flaticon-add121"></i></p><p>&lt;i class=&quot;flaticon-approve9&quot;&gt;&lt;/i&gt; <i class="flaticon-approve9"></i></p><p>&lt;i class=&quot;flaticon-back28&quot;&gt;&lt;/i&gt; <i class="flaticon-back28"></i></p><p>&lt;i class=&quot;flaticon-chat44&quot;&gt;&lt;/i&gt; <i class="flaticon-chat44"></i></p><p>&lt;i class=&quot;flaticon-circular191&quot;&gt;&lt;/i&gt; <i class="flaticon-circular191"></i></p></div><div class="image"><p>&lt;span class=&quot;flaticon-circular194&quot;&gt;&lt;/span&gt; <span class="flaticon-circular194"></span></p><p>&lt;span class=&quot;flaticon-close33&quot;&gt;&lt;/span&gt; <span class="flaticon-close33"></span></p><p>&lt;span class=&quot;flaticon-configuration12&quot;&gt;&lt;/span&gt; <span class="flaticon-configuration12"></span></p><p>&lt;span class=&quot;flaticon-double89&quot;&gt;&lt;/span&gt; <span class="flaticon-double89"></span></p><p>&lt;span class=&quot;flaticon-down51&quot;&gt;&lt;/span&gt; <span class="flaticon-down51"></span></p></div><div class="image"><p>&lt;span class=&quot;flaticon-exclamation22&quot;&gt;&lt;/span&gt; <span class="flaticon-exclamation22"></span></p><p>&lt;i class=&quot;flaticon-favourite15&quot;&gt;&lt;/i&gt; <i class="flaticon-favourite15"></i></p><p>&lt;i class=&quot;flaticon-internet28&quot;&gt;&lt;/i&gt; <i class="flaticon-internet28"></i></p><p>&lt;i class=&quot;flaticon-like47&quot;&gt;&lt;/i&gt; <i class="flaticon-like47"></i></p><p>&lt;i class=&quot;flaticon-menu33&quot;&gt;&lt;/i&gt; <i class="flaticon-menu33"></i></p></div><div class="image"><p>&lt;span class=&quot;flaticon-minus65&quot;&gt;&lt;/span&gt; <span class="flaticon-minus65"></span></p><p>&lt;span class=&quot;flaticon-mode&quot;&gt;&lt;/span&gt; <span class="flaticon-mode"></span></p><p>&lt;span class=&quot;flaticon-placeholder14&quot;&gt;&lt;/span&gt; <span class="flaticon-placeholder14"></span></p><p>&lt;span class=&quot;flaticon-right127&quot;&gt;&lt;/span&gt; <span class="flaticon-right127"></span></p><p>&lt;span class=&quot;flaticon-search67&quot;&gt;&lt;/span&gt; <span class="flaticon-search67"></span></p></div>
</section>
<div id="footer">
    <div>Generated by <a href="http://www.flaticon.com">flaticon.com</a>
    </div>
</div>
	</body>
</html>